/*
 * @Author: wangguanqing 
 * @Date: 2018-05-10 16:37:15 
 * @Last Modified by: wangguanqing
 * @Last Modified time: 2018-05-21 18:29:17
 */

<template>
  <bg-lay-out :hideTopBar="true" :widthSize="true" :hideMarginLeft="true" :background="'#161431'" :hideMask="true">
    <div slot="main" class="xdjhMain">
      <div class="components-container zdgzTabs">
        <p class="z_topTitleCon">
          <span class="z_topTitle">行动计划完成情况  </span>
          <span class="dateCircle">
              <el-date-picker :editable="false" :clearable="false" @change="dateChange" v-model="month" type="month" placeholder="选择月" class='week-con'></el-date-picker>
          </span>
        </p>
        <el-tabs v-model="activeName" type="border-card" @tab-click="fetchData">
          <el-tab-pane label="经营指标" name="1">
            <el-row  style="padding-bottom:2em">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" class="zdgzTable xdjhTable">
                <el-table :span-method="operateSpanMethod"
                    style="min-height:980px"
                    header-row-class-name="myHeadRow"
                    header-cell-class-name="myHeaderCell"
                    row-class-name="my-table-row"
                    cell-class-name="myCellCon" 
                    class="myTableCss"
                    :data="dataArr"  
                    @cell-mouse-enter="cellMouseEnter"
                    @cell-mouse-leave="cellMouseLeave">
                  <el-table-column align="center" prop="departmentName" label="板块/部门">
                  </el-table-column>
                  <el-table-column align="center" prop="keyPoints" label="KPI与关键事项">
                  </el-table-column>
                  <el-table-column align="center" width="280" prop="planNumber" label="计划数">
                  </el-table-column>
                  <el-table-column align="center" prop="unit" width="200" label="单位">
                  </el-table-column>
                  <el-table-column prop="percentComplete" header-align="center" align="center" label="完成百分比">
                    <template slot-scope="scope">
                      <div style="width:80%;margin:auto;position:relative">
                          <el-progress class="tableProgress" :text-inside="true" :stroke-width="22" :percentage="Number(scope.row.percentComplete.split('%')[0])" :status="Number(scope.row.percentComplete.split('%')[0])<Number(scope.row.percentTime.split('%')[0])?'exception':'success'"></el-progress>
                          <span class="tableProgressLeft">{{scope.row.percentComplete}}</span>
                      </div>
                      <!-- <span :style="{color:Number(scope.row.percentTime.split('%')[0])<100?'white':'#50FF50'}" class="tableProgressRight">{{scope.row.percentTime}}</span> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="percentTime" header-align="center" align="center" label="时间进度">
                    <template slot-scope="scope">
                      <div style="width:80%;margin:auto;position:relative">
                        <el-progress class="tableProgress" :text-inside="true" :stroke-width="22" :percentage="Number(scope.row.percentTime.split('%')[0])"></el-progress>
                        <span class="tableProgressRight">{{scope.row.percentTime}}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="管理指标" name="2">
            <el-row :gutter="20" style="padding-bottom:2em">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" class="zdgzTable glzbTable">
                <el-table
                style="min-height:980px"
                  :span-method="mangentSpan"  
                  :data="manageArr"  
                  header-row-class-name="myHeadRow"
                  header-cell-class-name="myHeaderCell"
                  row-class-name="my-table-row-two"
                  cell-class-name="myCellCon" 
                  class="myTableCss"
                  @cell-mouse-enter="cellMouseEnter2"
                  @cell-mouse-leave="cellMouseLeave2">
                  <el-table-column align="center" width="200" prop="departmentName" label="板块/部门">
                  </el-table-column>
                  <el-table-column align="center" width="300" prop="keyPoints" label="KPI与关键事项/内控要点">
                  </el-table-column>
                  <el-table-column header-align="center" align="left"  label="目标值/成果要求">
                    <template slot-scope="scope" >
                      <div  v-html="scope.row.targetValue.replace(/；/g,';<br/>')"></div>
                    </template>
                  </el-table-column>
                  <el-table-column header-align="center" align="left" prop="effect" label="效果（完成、未完成）">
                    <template slot-scope='scope'>
                        <div v-html="scope.row.effect.replace(/；|。/g,';<br/>')"></div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </bg-lay-out>
</template>
<script>
import bgLayOut from "@/components/bgLayOut/index";
import {
  GetOperatingIndicators,
  GetManagementIndicators
} from "@/api/keyJob/index";
export default {
  data() {
    return {
      tabDefault: "1",
      dataArr: [], // 数据
      pageSize: 15, // page组件上一页多少条
      page: 1,
      week: new Date(),
      activeName: "1",
      month: new Date(),
      scheduleNum: "",
      manageArr: [] // 管理数据
    };
  },
  components: {
    bgLayOut
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    cellMouseLeave(row, column, cell, event) {
      let rowindex = row.id;
      // console.log(rowindex);
      let arr = this.dataArr;
      while (rowindex >= 0) {
        if (arr[rowindex].spanNum) {
          // $('.my-table-row').eq(rowindex).children().eq(0).addClass('my-table-row-hover');
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("background-color", "#11121F");
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("color", "white");
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("font-weight", "normal");
          /*
          hovers[rowindex] = true;
          this.$set(this, "hover", hovers);
          */
          return;
        }
        rowindex--;
      }
    },
    cellMouseLeave2(row, column, cell, event) {
      let flag1 = false;
      let flag2 = false;
      let rowindex = row.id;
      // console.log(rowindex);
      let arr = this.manageArr;
      while (rowindex >= 0) {
        if (!flag1 && arr[rowindex].spanNumSec) {
          flag1 = true;
          if (
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .attr("rowspan")
          ) {
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("background-color", "#11121F");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("color", "white");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("font-weight", "normal'");
          } else {
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("background-color", "#11121F");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("color", "white");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("font-weight", "normal");
          }
        }
        if (!flag2 && arr[rowindex].spanNum) {
          // $('.my-table-row').eq(rowindex).children().eq(0).addClass('my-table-row-hover');
          // $('.my-table-row-two').eq(rowindex).children().eq(0).css('background-color','#11121F');
          // $('.my-table-row-two').eq(rowindex).children().eq(0).css('color','white')
          /*
          hovers[rowindex] = true;
          this.$set(this, "hover", hovers);
          */
          // let children = $('.my-table-row-two').eq(rowindex).children();
          // for(let i = 0;i < children.length;i++) {
          // let obj = children.eq(i);
          // if(obj.attr('rowspan')) {
          flag2 = true;
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("background-color", "#11121F");
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("color", "white");
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("font-weight", "normal");
          // obj.css('background-color','#0D0E1F')
          // obj.css('color','white')
          // obj.css('font-weight','normal')
          // }
          // }
          // return;
        }

        rowindex--;
      }
    },
    cellMouseEnter2(row, column, cell, event) {
      let flag1 = false;
      let flag2 = false;

      let rowindex = row.id;
      // console.log(rowindex);
      let arr = this.manageArr;
      while (rowindex >= 0) {
        console.log(arr[rowindex]);
        if (!flag1 && arr[rowindex].spanNumSec) {
          if (
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .attr("rowspan")
          ) {
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("background-color", "rgba(81, 131, 136,.5)");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("color", "#fff");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(1)
              .css("font-weight", "800");
          } else {
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("background-color", "rgba(81, 131, 136,.5)");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("color", "#fff");
            $(".my-table-row-two")
              .eq(rowindex)
              .children()
              .eq(0)
              .css("font-weight", "800");
          }
          flag1 = true;
        }
        if (!flag2 && arr[rowindex].spanNum) {
          // $('.my-table-row').eq(rowindex).children().eq(0).addClass('my-table-row-hover');
          // let children = $('.my-table-row-two').eq(rowindex).children();
          // for(let i = 0;i < children.length;i++) {
          // let obj = children.eq(i);
          // console.log(obj.attr('rowspan'));
          // if(obj.attr('rowspan') ) {
          flag2 = true;
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("background-color", "rgba(81, 131, 136,.5)");
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("color", "#fff");
          $(".my-table-row-two")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("font-weight", "800");
          // obj.css('background-color','#DCDCDC')
          // obj.css('color','black')
          // obj.css('font-weight','bold')
          // }
          // }

          /*
          hovers[rowindex] = true;
          this.$set(this, "hover", hovers);
          */
          // return;
        }
        rowindex--;
      }
    },
    cellMouseEnter(row, column, cell, event) {
      let rowindex = row.id;
      // console.log(rowindex);
      let arr = this.dataArr;
      console.log(row);
      while (rowindex >= 0) {
        if (arr[rowindex].spanNum) {
          // $('.my-table-row').eq(rowindex).children().eq(0).addClass('my-table-row-hover');
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("background-color", "rgba(81, 131, 136,.5)");
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("color", "#fff");
          $(".my-table-row")
            .eq(rowindex)
            .children()
            .eq(0)
            .css("font-weight", "800");
          /*
          hovers[rowindex] = true;
          this.$set(this, "hover", hovers);
          */
          return;
        }
        rowindex--;
      }
    },
    setHeaderCell({ row, rowIndex }) {
      if (rowIndex === 3) {
        return "myHeadCellRed";
      } else {
        return "myHeadCell";
      }
    },
    mangentSpan({ row, column, rowIndex, columnIndex }) {
      if (Number(columnIndex) === 0) {
        if (row.spanNum >= 1) {
          return {
            rowspan: row.spanNum,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (Number(columnIndex) === 1) {
        if (row.spanNumSec >= 1) {
          return {
            rowspan: row.spanNumSec,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    operateSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (Number(columnIndex) == 0) {
        if (row.spanNum >= 1) {
          return {
            rowspan: row.spanNum,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // if ( columnIndex == 4){
      //   return {
      //     rowspan: 1,
      //     colspan: 2,
      //   }
      // }
    },
    handleCurrentChange(index) {
      this.page = index;
    },
    dateChange() {
      this.handleCurrentChange(1);
      this.fetchData();
    },
    // 管理指标
    async fetchManagent() {
      this.$set(this, "manageArr", []);
      try {
        var month = new Date(this.month).getMonth() + 1;
        var year = new Date(this.month).getFullYear();
        var allDays = new Date(year, month, 0).getDate();
        var endTime = year + "-" + month + "-" + allDays;
        var startTime = year + "-" + month + "-" + "1";
        let params = {
          startTime: startTime,
          endTime: endTime
        };
        let res = await GetManagementIndicators(params);
        if (res.data.code == 0) {
          var oldName = res.data.result[0].departmentName;
          var repetId = 0; // 重复行书
          var oldKeyPoint = res.data.result[0].keyPoints;
          var repetKeyId = 0; // 重复的keyPoint
          res.data.result.forEach((item, id) => {
            res.data.result[id]["id"] = id;
            // 第一列合并行
            if (item.departmentName != oldName) {
              if (id - repetId >= 0) {
                res.data.result[id - repetId].spanNum = repetId;
              }
              if (Number(id) == Number(res.data.result.length - 1)) {
                res.data.result[id].spanNum = 1;
              }
              repetId = 1;
            } else {
              repetId += 1;
              if (Number(id) == Number(res.data.result.length - 1)) {
                res.data.result[id - repetId + 1].spanNum = repetId;
              }
            }
            oldName = item.departmentName;
            // 判断第二列合并行
            if (item.keyPoints != oldKeyPoint) {
              if (id - repetKeyId >= 0) {
                res.data.result[id - repetKeyId].spanNumSec = repetKeyId;
              }
              if (Number(id) == Number(res.data.result.length - 1)) {
                res.data.result[id].spanNumSec = 1;
              }
              repetKeyId = 1;
            } else {
              repetKeyId += 1;
              if (Number(id) == Number(res.data.result.length - 1)) {
                res.data.result[id - repetKeyId + 1].spanNumSec = repetKeyId;
              }
            }
            oldKeyPoint = item.keyPoints;
          });

          this.$set(this, "manageArr", res.data.result);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 请求数据
    async fetchData() {
      this.$set(this, "dataArr", []);
      try {
        var month = new Date(this.month).getMonth() + 1;
        var year = new Date(this.month).getFullYear();
        var allDays = new Date(year, month, 0).getDate();
        var endTime = year + "-" + month + "-" + allDays;
        var startTime = year + "-" + month + "-" + "1";
        let params = {
          startTime: startTime,
          endTime: endTime
        };
        if (this.activeName == "2") {
          this.fetchManagent();
          return;
        }
        let res = await GetOperatingIndicators(params);
        if (res.data.code == 0) {
          var oldName = res.data.result[0].departmentName;
          var repetId = 0; // 重复行书
          res.data.result.forEach((item, id) => {
            res.data.result[id]["id"] = id;
            if (item.departmentName != oldName) {
              if (id - repetId >= 0) {
                res.data.result[id - repetId].spanNum = repetId;
              }
              if (Number(id) == Number(res.data.result.length - 1)) {
                res.data.result[id].spanNum = 1;
              }
              repetId = 1;
            } else {
              repetId += 1;
            }
            oldName = item.departmentName;
          });
          this.$set(this, "dataArr", res.data.result);
          // console.log(this.dataArr)
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss">
@import "../../../../../styles/element-ui/date/dateCircle.css";
@import "../../../../../styles/element-ui/tabs/zdgzTabs.scss";
@import "../../../../../styles/element-ui/table/zdgzTable.scss";
@import "../../../../../styles/pages/workDeployment/_xingdongjihua";
</style>
